<template>
  <div class="main">
    <el-button type="primary" @click="$router.go(-1)" icon="el-icon-back">返回上级</el-button>
    <p class="title">{{ resumeData.resume.name }}</p>
    <p class="time"><i class="el-icon-time"></i>最近更新:{{ resumeData.resume.updateTime }}</p>
    <div class="edit"><el-button type="primary" icon="el-icon-edit" @click="editResume">编辑</el-button></div>
    <el-card v-for="item in resumeForm" :key="item.value">
      <template v-if="'type' in item && item.type == 'list'"
        ><el-descriptions
          v-for="(lItem, index) in resumeData[item.value]"
          :key="lItem.id"
          border
          :title="`${item.title}${index + 1}`"
          :column="'column' in item && item.column">
          <el-descriptions-item v-for="cItem in item.children" :key="cItem.value" :label="cItem.label">
            <span class="resume-text">{{ lItem[cItem.value] }}</span>
          </el-descriptions-item>
        </el-descriptions></template
      >
      <el-descriptions v-else :title="item.title" :column="'column' in item && item.column" border>
        <el-descriptions-item v-for="cItem in item.children" :key="cItem.value" :label="cItem.label">
          <template v-if="'type' in cItem && cItem.type == 'image'">
            <el-image :src="downloadFile(resumeData[item.value][cItem.value])" class="resume-image"></el-image>
          </template>
          <template v-else-if="'type' in cItem && cItem.type == 'file'">
            <el-link :underline="false" :href="downloadFile(resumeData[item.value][cItem.value])" type="success" icon="el-icon-download"
              >点击下载</el-link
            >
          </template>
          <span v-else class="resume-text">{{ resumeData[item.value][cItem.value] }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
import { downloadFile } from '@/utils/file'
export default {
  data() {
    return {
      resumeData: {},
      resumeForm: [
        {
          title: '基本信息',
          value: 'resume',
          column: 2,
          children: [
            {
              label: '姓名',
              value: 'username',
            },
            {
              label: '头像',
              value: 'avatar',
              type: 'image',
            },
            {
              label: '性别',
              value: 'sexName',
            },
            {
              label: '年龄',
              value: 'age',
            },
            {
              label: '生日',
              value: 'birthday',
            },
            {
              label: '手机号',
              value: 'phone',
            },
            {
              label: '邮箱',
              value: 'email',
            },
            {
              label: '住址',
              value: 'address',
            },
            {
              label: '身份证号',
              value: 'identity',
            },
          ],
        },

        {
          title: '教育经历',
          value: 'educationExperiences',
          type: 'list',
          column: 2,
          children: [
            {
              label: '开始时间',
              value: 'start',
            },
            {
              label: '结束时间',
              value: 'end',
            },
            {
              label: '学校',
              value: 'school',
            },
            {
              label: '专业',
              value: 'major',
            },
            {
              label: '学历',
              value: 'degreeName',
            },
          ],
        },
        {
          title: '工作经历',
          value: 'workExperiences',
          type: 'list',
          column: 2,
          children: [
            {
              label: '开始时间',
              value: 'start',
            },
            {
              label: '结束时间',
              value: 'end',
            },
            {
              label: '公司名称',
              value: 'company',
            },
            {
              label: '岗位职责',
              value: 'duty',
            },
          ],
        },
        {
          title: '项目经历',
          value: 'projectExperiences',
          type: 'list',
          column: 2,
          children: [
            {
              label: '开始时间',
              value: 'start',
            },
            {
              label: '结束时间',
              value: 'end',
            },
            {
              label: '项目名称',
              value: 'name',
            },
            {
              label: '项目角色',
              value: 'role',
            },
            {
              label: '项目描述',
              value: 'description',
            },
          ],
        },
        {
          title: '',
          value: 'resume',
          column: 1,
          children: [
            {
              label: '专业技能',
              value: 'skill',
            },
            {
              label: '自我评价',
              value: 'advantage',
            },
            {
              label: '附件',
              value: 'fileId',
              type: 'file',
            },
          ],
        },
      ],
    }
  },
  computed: {
    currentId() {
      return this.$route.query.id
    },
  },
  created() {
    this.getResume(this.currentId)
  },
  methods: {
    downloadFile,
    // 获取简历
    getResume(id) {
      console.log(id)
      this.$store.dispatch('resume/lookOneResume', id).then((response) => {
        this.resumeData = response.data
        console.log(this.resumeData)
      })
    },
    // 编辑简历
    editResume() {
      this.$router.push({
        path: '/editResume',
        query: { id: this.currentId },
      })
    },
    addResume() {
      this.$router.push({
        path: '/resume',
        query: { type: 'add', id: this.currentId },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  margin-top: 70px;
  border: 1px solid white;
  width: 80%;
  margin-left: 10%;
  height: 83vh;
  overflow: auto;
  .title {
    font-size: 30px;
    font-family: '微软雅黑';
    font-weight: bold;
  }
  .edit {
    width: 100%;
    .el-button {
      margin-left: 90%;
    }
  }
  ::v-deep .el-card {
    .el-descriptions {
      .resume-text {
        white-space: pre-wrap;
      }
      .resume-image {
        img {
          width: 8rem;
          height: 8rem;
        }
      }
      .el-descriptions__body {
        .el-descriptions__table {
          width: 100%;
          .el-descriptions-row {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
